import React from 'react';

import RouteView, { IRouteViewProps } from '../../router/RouteView'
import { Layout, Menu } from 'antd';

import { History } from "history";
import './index.less';

import { MenuList } from '../../modules/menu/MenuList'

interface ILayoutProps extends IRouteViewProps {
    history: History;
}


const { Header } = Layout;


export const menuList: Array<MenuList> = [
    {
        title: "申请手术",
        path: "/home/menu/page1",
        iconName: "复苏",
    },
    {
        title: "手术派台",
        path: "/home/menu/page2",
        iconName: "复苏",
    },
    {
        title: "申请手术",
        path: "/home/menu/page1",
        iconName: "复苏",
    },
    {
        title: "手术派台",
        path: "/home/menu/page2",
        iconName: "复苏",
    },
    {
        title: "申请手术",
        path: "/home/menu/page1",
        iconName: "复苏",
    },
    {
        title: "手术派台",
        path: "/home/menu/page2",
        iconName: "复苏",
    },
    {
        title: "申请手术",
        path: "/home/menu/page1",
        iconName: "复苏",
    },
    {
        title: "手术派台",
        path: "/home/menu/page2",
        iconName: "复苏",
    },
    {
        title: "申请手术",
        path: "/home/menu/page1",
        iconName: "复苏",
    },
    {
        title: "手术派台",
        path: "/home/menu/page2",
        iconName: "复苏",
    }
]

class HeadDiv extends React.Component<ILayoutProps, any> {





    onSelect = (item: any) => {
        console.log("onSelect", item);
        if (item.key === "1")
            this.props.history.push("/home/layout");
        else this.props.history.push(
            {
                pathname: "/home/menu", state: {
                    menuList: menuList,
                    key: item.key,
                }
            });
    }

    render() {
        return <div >
            <Layout>
                <Header className="header">
                    <div className="logo">手术麻醉信息系统</div>
                    <Menu className="headerTitle" theme="dark" mode="horizontal" defaultSelectedKeys={['1']}
                        onSelect={this.onSelect}>
                        <Menu.Item key="1" className='headerTitleSmall'>首页</Menu.Item>
                        <Menu.Item key="2" className='headerTitleSmall'>术前</Menu.Item>
                        <Menu.Item key="3" className='headerTitleSmall'>术中</Menu.Item>
                        <Menu.Item key="4" className='headerTitleSmall'>术后</Menu.Item>
                        <Menu.Item key="5" className='headerTitleSmall'>药品</Menu.Item>
                    </Menu>
                </Header>
                <div className='headerBottom'>
                </div>
            </Layout>

            <RouteView {...this.props}></RouteView>
        </div>

    }


}


export default HeadDiv;